<template>
  <div>
      <el-row>
        <el-col :span="4">
          <aside class="home-aside">
            <section>
              <h4>新鲜资讯</h4><router-link to="/muyingzx" class="routerlinktozx">查看更多</router-link>
              <div v-for="(item,index) in zixunList" :key="item.id">
                <p class="zx-title" @click="gotozixunDetail(item.id)">{{index+1 }}.{{ item.title }}</p>
              </div>
            </section>
            <section>
              <h4>公告</h4>
              <router-link to="/announcement_one" class="announcement">1.易儿宝母婴闲置用品交易平台公告</router-link>
              <router-link to="/announcement_two" class="announcement">2.易儿宝母婴闲置用品交易平台安全性公告</router-link>
            </section>
          </aside>
        </el-col>
        <!-- 轮播图 -->
        <el-col :span="19">
          <div>
            <el-carousel :interval="3000"  height="500px">
              <el-carousel-item v-for="item in imageList" :key="item.id">
                <img :src="item.img_url" :alt="item.img_describe" v-if="item.img_show === 1" class="home-images">
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hotpng">
          <!-- 热门商品 -->
          <img src="@/assets/hotStore.png" alt="">
        </el-col>
      </el-row>
      <el-row v-if="hotStoreList.length !== 0">
        <el-col :span="6" v-for="store in hotStoreList" :key="store.id" >
          <div class="grid-content bg-purple" @click="lookstore(store.id)">
            <img v-lazy="store.product_img" alt="" class="storeinfo-img" :key="store.id">
            <p class="storename">{{store.product_name}}</p>
            <p v-if="store.price.indexOf('.') === -1" class="price">￥{{ store.price }}.00</p>
            <p v-else class="price">￥{{ store.price }}</p>
            <p v-if="store.Author" class="author"> {{ store.Author }}</p>
          </div>
        </el-col>
      </el-row>
      <el-row v-else class="nothingrow">
        <img src="../../assets/nothing.png" alt="" class="nothingimg">
      </el-row>
  </div>
</template>

<script>
import { isShowimageAPI, getHotstoreAPI, getstoreByid, getarticleAPI, getarticledetailbyidAPI } from '@/api'
import { mapMutations } from 'vuex'
export default {
  name: 'my-home',
  data () {
    return {
      // 首页轮播图
      imageList: [],
      // 热门商品
      hotStoreList: [],
      // 母音资讯列表
      zixunList: []
    }
  },
  mounted () {
    this.getImageList()
    this.getHotstoreList()
    this.getArticleList()
  },
  methods: {
    // 任取数组函数
    getRandomItems (arr, num) {
      const result = []
      const length = arr.length
      const indices = new Set()

      while (indices.size < num) {
        const randomIndex = Math.floor(Math.random() * length)
        indices.add(randomIndex)
      }

      indices.forEach((index) => {
        result.push(arr[index])
      })

      return result
    },
    // 获取母婴资讯
    async getArticleList () {
      const { data } = await getarticleAPI()
      if (data.status !== 0) return this.$message.error(data.message)
      const list = data.data
      this.zixunList = this.getRandomItems(list, 5)
    },
    // 获取首页轮播图
    async getImageList () {
      const { data } = await isShowimageAPI()
      this.imageList = data.data
    },
    // 获取热门商品
    async getHotstoreList () {
      const { data } = await getHotstoreAPI()
      this.hotStoreList = data.data
    },
    ...mapMutations(['getstoredetail']),
    lookstore (id) {
      this.$router.push('/storedetail')
      getstoreByid(id).then(({ data }) => {
        this.getstoredetail(data.data)
      })
    },
    ...mapMutations(['getarticledetail']),
    gotozixunDetail (id) {
      getarticledetailbyidAPI(id).then(({ data }) => {
        this.getarticledetail(data.data)
      })
      this.$router.push('/zixundetail')
    }
  }
}
</script>

<style scoped>
  * {
    padding: 0;
    margin: 0;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0px;
  }
  .el-row {
    height: 100%;
  }
  .home-aside {
    height: 500px;
    border-radius: 8px;
    margin-left: 5px;
    margin-right: 15px;
  }
  h4 {
    display: inline-block;
  }
  .routerlinktozx {
    font-size: 12px;
    text-decoration: none;
    opacity: .5;
  }
  .home-aside section:first-child {
    margin-bottom: 10px;
  }
  .home-aside section {
    width: 100%;
    height: 245px;
    border-radius: 10px;
    background:linear-gradient(135deg,#dcffbd,#cc86d1)
  }
   .home-aside section h4 {
    padding: 10px;
  }
  .zx-title {
    font-size: 13px;
    color: #495057;
    cursor: pointer;
    padding-left:3px;
    margin: 4px 0px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .zx-title:hover{
    text-decoration: underline;
    opacity: .8;
  }
  .grid-content {
    position: relative;
    background: #fff0f6;
    border-radius: 10px;
    margin-left: 10px;
    margin-top: 30px;
    height: 360px;
  }
  .announcement{
    font-size: 13px;
    color: #495057;
    padding-left:3px;
    margin: 4px 0px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
  }
  .announcement:hover {
    text-decoration: underline;
    opacity: .8;
  }
  .grid-content:hover {
    background-color: #fff9f5;
    border-radius: 10px;
  }
  /* 轮播图 */
  .home-images {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
  .rowhot {
    overflow: hidden;
  }
  .hotpng {
    height: 70px;
    line-height: 100px;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .storename {
    margin-left: 3%;
    width:95%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor:pointer;
    font-weight: 600;
    font-size: 14px;
    color: #333;
  }
  .storename:hover {
    text-decoration: underline;
  }
  .storeinfo-img {
    display: inline-block;
    height: 260px;
    width: 95%;
    margin-left: 2%;
    object-fit: fill;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 3px;
  }
  .grid-content span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    opacity: .6;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-size: 12px;
    cursor:pointer;
  }
  .author {
      margin: 0;
      padding: 0;
      margin-right: 15px;
      position: absolute;
      right: 0px;
      bottom: 5px;
      color: #888;
      font-size: 12px;
      cursor: pointer;
    }
  .price {
    color:red;
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    position: absolute;
    bottom: 5px;
  }

</style>
